<script setup lang="ts">
import type {Team} from "@/models/team";
import {teamStatusNum} from "@/constants/team";
import defaultAvatar from "@/assets/images/avatar.gif";
import {joinTeam} from "@/api/TeamApi";
import {closeToast, showFailToast, showLoadingToast, showSuccessToast} from "vant";
import {onMounted, reactive, toRefs} from "vue";
import {getCurrentUser} from "@/services/user";
import type {User} from "@/models/user";
import router from "@/router";


// 定义数据从父组件进行传递
interface TeamCardListProps {
  teamList: Team[];
}

const props = withDefaults(defineProps<TeamCardListProps>(), {
  // 如果后端返回null，则使用默认值来展示
  teamList: () => [] as Team[],
});

interface joinQuery {
  id: number,
  password: string
}

const state = reactive({
  currentUser: {} as User,
})

const {currentUser} = {...toRefs(state)}


const doJoinTeam = async (team: any) => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  if (team.status === 2) {

  }
  try {
    const postData = {
      teamId: team.id,
      password: team.password,
    }
    console.log(postData);
    const res = await joinTeam(postData);
    if (res.data.code === 0) {
      console.log(res.data)
      // 指定提示时长
      showSuccessToast(res.data.description)
    } else {
      showFailToast(res.data.description || '加载失败')
    }
    // @ts-ignore
  } catch (error) {
    closeToast()
    console.error('异常：', error);
  } finally {
    closeToast();
  }
}


const doUpdateTeam = (teamId: number) => {
  router.push({
    path: "/team/update",
    query: {
      teamId: teamId,
    }
  });
}

onMounted(async () => {
  const res = await getCurrentUser();
  state.currentUser = res.data.data;
  console.log(currentUser.value)
})


</script>

<template>
  <div class="list-box" v-for="team in props.teamList">
    <van-card
        style="background-color:#fff;"
        :title="team.name || '暂无昵称' "
        :thumb="defaultAvatar"
    >
      <template #tag>
        <div class="Team-list-box">
          <van-tag
              v-if="team.status === 0"
              mark
              :color="teamStatusNum[team.status].color"
          >{{ teamStatusNum[team.status].text }}
          </van-tag>
          <van-tag
              v-else-if="team.status === 1"
              mark
              :color="teamStatusNum[team.status].color"
          >{{ teamStatusNum[team.status].text }}
          </van-tag>
          <van-tag
              v-else-if="team.status === 2"
              mark
              :color="teamStatusNum[team.status].color"
              text-color="#fff"
          >{{ teamStatusNum[team.status].text }}
          </van-tag>
        </div>
      </template>
      <template #desc>
        <div class="Team-list-box">
          <span><strong>队伍简介：</strong> {{ team?.description || '用户暂未提供简介...' }} </span>
          <br/>

          <span>{{ team?.createTime }} 创建 </span>
        </div>
      </template>
      <template #price>
        <div>
          <span style="font-weight: 400">队伍容量：{{ team.maxNum || '暂未提供' }} 人</span>
        </div>
      </template>
      <template #footer>
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span><strong style="color: #ea6363; padding: 0">过期时间：</strong>{{ team.expireTime }}</span>
          <div style="display: flex;">
            <van-button v-if="team.userId === state.currentUser.id" @click="doUpdateTeam(team.id)" plain size="mini">
              修改队伍
            </van-button>
            <van-button type="primary" v-if="team.userId !== state.currentUser.id" plain size="mini" @click="doJoinTeam(team)">加入队伍</van-button>
          </div>
        </div>
      </template>
    </van-card>
  </div>
</template>

<style scoped>
.Team-list-tags {
  margin-right: 5px
}

.Team-list-tags:last-child {
  margin-right: 0
}

.Team-list-box {
  margin-top: 10px;
}

.list-box {
  margin-top: 5px;
  margin-bottom: 10px;
}
</style>